<template>
  <div class="list-box">
    <div class="content-box">
      <div class="head-box w-card">
        <div class="title-box">
          <span>资产总览</span>
        </div>
        <div class="info-box">
          <div class="left-info">
            <div class="w-flex w-f-a-c">
              <div class="w-ff-c">
                <span>商户账户余额(元)</span>
                <span class="jinE">{{ numFormat(infoForm.leftFee) || '' }}</span>
              </div>
              <div class="w-ml-a">
                <el-button @click="toFlow">查看代充记录</el-button>
                <el-button type="primary" @click="subHanlde(1)">线下代充</el-button>
              </div>
            </div>
            <div class="q-box w-f-a-c w-f-j-sb">
              <div class="w-ff-c w-w50">
                <span>充值总额(元)</span>
                <span class="jinE2">{{ numFormat(infoForm.chargeTotal) || '' }}</span>
              </div>
              <div class="w-ff-c w-w50">
                <span>消费总额(元)</span>
                <span class="jinE2">{{ numFormat(infoForm.usedTotal) || '' }}</span>
              </div>
            </div>
          </div>
          <div class="left-info" style="border-right:none;">
            <div class="w-flex w-f-a-c">
              <div class="w-ff-c">
                <span>累计分润总额(元)</span>
                <span class="jinE">{{ numFormat(infoForm.incomeTotal) || '' }}</span>
              </div>
              <div class="w-ml-a">
                <el-button type="primary" @click="toMyrule">配置提现规则</el-button>
              </div>
            </div>
            <div class="q-box w-f-a-c w-f-j-sb">
              <div class="w-ff-c w-w50">
                <span>待提现佣金(元)</span>
                <span class="jinE2">{{ numFormat(infoForm.incomeRest) || '' }}</span>
              </div>
              <div class="w-ff-c w-w50">
                <span>冻结佣金(元)</span>
                <span class="jinE2">{{ numFormat(infoForm.incomeFreezen) || '' }}</span>
              </div>
              <div class="w-ff-c w-w50">
                <span>已提现佣金(元)</span>
                <span class="jinE2">{{ numFormat(infoForm.incomeWithdraw) || '' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-box w-card">
        <div class="title-box">
          <span>商户资产列表</span>
        </div>
        <div class="search-box w-flex w-f-a-c">
          <div class="w-flex w-f-a-c">
            <span class="f-s-0">商户名称：</span>
            <el-input v-model="searchForm.shopName" clearable placeholder="请输入商户名称" />
          </div>
          <div class="w-flex w-f-a-c">
            <span class="f-s-0">余额区间：</span>
            <el-radio-group v-model="searchForm.capitalType">
              <el-radio :label="1">账户余额</el-radio>
              <el-radio :label="2">待提现佣金</el-radio>
            </el-radio-group>
            <el-input style="width:80px;margin-left:5px;" v-model="searchForm.min" min="0" clearable placeholder="最低" />
            <span style="margin:0 5px;">—</span>
            <el-input style="width:80px;" v-model="searchForm.max" clearable placeholder="最高" min="0" />
          </div>
          <el-button type="primary" @click="searchHandle">查询</el-button>
          <el-button style="margin-left:0;" @click="resetHandle">重置</el-button>
        </div>
        <div class="table-content">
          <el-table :max-height="tableHeight" :header-cell-style="{background:'#d6dee5',color:'#000000',fontSize:'14px'}"
            :cell-style="{fontSize:'14px',color:'#7b7b7d'}" :data="tableData" stripe @sort-change="sortChange">
            <el-table-column type="index" width="55" label="序号" align="center" />
            <el-table-column prop="shopName" label="商户名称" align="center">
              <template v-slot="scope">
                {{ scope.row.shopName || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="leftFee" label="账户余额(元)" align="center" sortable="custom" width="140">
              <template v-slot="scope">
                {{ numFormat(scope.row.leftFee) || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="chargeTotal" label="充值总额(元)" align="center" sortable="custom" width="140">
              <template v-slot="scope">
                <el-link type="info" @click="lookFlow(1,scope.row)">{{ numFormat(scope.row.chargeTotal) || '' }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="usedTotal" label="消费总额(元)" align="center" sortable="custom" width="140">
              <template v-slot="scope">
                <el-link type="info" @click="lookFlow(2,scope.row)">{{ numFormat(scope.row.usedTotal) || '' }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="incomeRest" label="待提现佣金(元)" align="center" sortable="custom" width="150">
              <template v-slot="scope">
                {{ numFormat(scope.row.incomeRest) || '' }}
              </template>
            </el-table-column>
            <el-table-column prop="incomeTotal" label="累计分润(元)" align="center" sortable="custom" width="140">
              <template v-slot="scope">
                <el-link type="info" @click="lookFlow(3,scope.row)">{{ numFormat(scope.row.incomeTotal) || '' }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="incomeWithdraw" label="已提现佣金(元)" align="center" sortable="custom" width="150">
              <template v-slot="scope">
                <el-link type="info" @click="lookFlow(4,scope.row)">{{ numFormat(scope.row.incomeWithdraw) || '' }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="incomeFreezen" label="冻结佣金(元)" align="center" sortable="custom" width="140">
              <template v-slot="scope">
                <el-link type="info" @click="lookFlow(5,scope.row)">{{ numFormat(scope.row.incomeFreezen) || '' }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="Operations" label="操作" align="center" width="100">
              <template v-slot="scope">
                <div class="table-handle-box">
                  <el-link style="font-size:14px" type="primary" @click="subHanlde(2,scope.row)">代充</el-link>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-footer">
            <el-pagination v-model:currentPage="page" v-model:page-size="size" :page-sizes="[10, 20, 50, 100]" small
              :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <replace ref="replaceRef" @dialogClose="replaceClose" />
  <myrule ref="myruleRef" />
</template>

<script>
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { getWindowWidthAndHeight, numFormat, warningDeal, getDateTime } from '@/utils/utils'
import replace from '../components/replace.vue'
import myrule from '../components/myrule.vue'
import api from '../api'
import { useRouter } from 'vue-router'
import { useStateStore } from '@/store'
export default {
  components: {
    replace,
    myrule,
  },
  setup() {
    const store = useStateStore()
    const router = useRouter()

    const replaceRef = ref(null)
    const myruleRef = ref(null)

    const state = reactive({
      tableHeight: 0,
      page: 1,
      size: 10,
      total: 0,
      infoForm: {},
      searchForm: {
        capitalType: 1,
      },
      tableData: [],
      orderByData: computed(() => {
        return store.getOrderByData
      }),
    })

    function getInfo() {
      api.capitalStaticsTotal().then(res => {
        if (res.code == '200') {
          state.infoForm = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function searchHandle() {
      state.page = 1
      getTableData()
    }

    function resetHandle() {
      state.searchForm = {
        capitalType: 1,
      }
      searchHandle()
    }

    function getTableData() {
      const obj = {
        page: state.page,
        size: state.size,
        ...state.searchForm,
      }
      api.capitalQryList(obj).then(res => {
        if (res.code == '200') {
          state.tableData = res.data.list
          state.total = res.data.total
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function handleCurrentChange(e) {
      state.page = e
      getTableData()
    }

    function handleSizeChange(e) {
      state.size = e
      getTableData()
    }

    function subHanlde(i, data) {
      switch (i) {
        case 1:
          //代充
          break
        case 2:
          //指定商户代充
          break
      }
      replaceRef.value.dialogShow(i, data)
    }

    function toMyrule() {
      myruleRef.value.dialogShow()
    }

    function toFlow() {
      router.push({ path: '/accountMng/flow' })
    }

    function replaceClose() {
      getInfo()
      getTableData()
    }

    function sortChange(e) {
      if (e.order) {
        const myField = state.orderByData[e.prop]
        const myOrder = e.order == 'descending' ? 'desc' : e.order == 'ascending' ? 'asc' : ''
        state.searchForm.orderBy = myField + ' ' + myOrder
      } else {
        state.searchForm.orderBy = ''
      }
      searchHandle()
    }

    function lookFlow(i, data) {
      switch (i) {
        case 1:
          //充值总额
          router.push({ path: '/accountMng/chongzhi', query: { shopId: data.shopId } })
          break
        case 2:
          //消费总额
          router.push({ path: '/accountMng/xiaofei', query: { shopId: data.shopId } })
          break
        case 3:
          //累计分润
          router.push({ path: '/accountMng/fenrun', query: { shopId: data.shopId } })
          break
        case 4:
          //已提现佣金
          router.push({ path: '/accountMng/tixian', query: { shopId: data.shopId } })
          break
        case 5:
          //冻结佣金
          router.push({ path: '/accountMng/dongjie', query: { shopId: data.shopId } })
          break
      }
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
      state.tableHeight = winHeight.windowHeight - 240
      getInfo()
      getTableData()
    })

    return {
      ...toRefs(state),
      replaceRef,
      myruleRef,
      numFormat,
      resetHandle,
      searchHandle,
      getDateTime,
      handleCurrentChange,
      handleSizeChange,
      subHanlde,
      toMyrule,
      replaceClose,
      toFlow,
      sortChange,
      lookFlow,
    }
  }
}
</script>

<style lang="scss" scoped>
.list-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow-y: auto;
    gap: 20px;
    .head-box {
      box-sizing: border-box;
      padding: 20px;
      .info-box {
        display: flex;
        align-items: center;
        margin-top: 10px;
        > div {
          width: 50%;
          box-sizing: border-box;
          padding: 0 20px;
        }
        .left-info {
          font-size: 14px;
          color: #727780;
          border-right: 1px dashed #a5a5a5;
          > div {
            width: 100%;
          }
          .q-box {
            background-color: rgba($color: #0081ff, $alpha: 0.1);
            box-sizing: border-box;
            padding: 20px;
            margin-top: 10px;
            > div {
              > span {
                flex-shrink: 0;
              }
              &:not(:last-of-type) {
                border-right: 1px solid #d3d3d3;
              }
              &:not(:first-of-type) {
                box-sizing: border-box;
                padding: 0 20px;
              }
            }
          }
        }
      }
    }
    .table-box {
      box-sizing: border-box;
      padding: 20px;
      font-size: 14px;
      .search-box {
        margin-top: 10px;
        gap: 10px;
      }
    }
  }
}
.table-content {
  margin-top: 10px;
  .table-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
.f-s-0 {
  flex-shrink: 0;
}
.title-box {
  display: flex;
  align-items: center;
  > span {
    font-size: 16px;
    font-weight: bold;
  }
}
.jinE {
  font-size: 24px;
  color: #000000;
}
.jinE2 {
  font-size: 18px;
  color: #000000;
}
</style>